<script setup lang="ts">
import { addRoleApi } from '@/apis/role'
import router from '@/router'
import { ElMessage } from 'element-plus'
import { preview } from 'vite'
import { ref } from 'vue'

const addRoleForm = ref({
  role_name: '',
  role_desc: '',
})

const fromRules = {
  role_name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
}

// 新增
const addRole = async () => {
  const res = await addRoleApi(addRoleForm.value)
  if (res.data.state !== 201) {
    return ElMessage.error(res.data.msg)
  }
  ElMessage.success('新增角色成功')
  router.push('/role')
}
// 返回上一个页面
const preView = () => {
  router.back()
}
</script>

<template>
  <el-card>
    <template #header>
      <el-button>角色创建</el-button>
      <el-button @click="preView">返回</el-button>
    </template>

    <el-form :model="addRoleForm" :rules="fromRules" label-width="auto" size="large">
      <el-form-item label="角色名称" prop="role_name">
        <el-input placeholder="请输入角色名称" v-model="addRoleForm.role_name"></el-input>
      </el-form-item>
      <el-form-item label="角色描述">
        <el-input placeholder="请输入角色描述" v-model="addRoleForm.role_desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addRole">立即创建</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss"></style>
